<template>
	<view class="editAddress">
		<view class="container">
			<view class="card">
				<view class="form-item">
					<label>收件人</label>
					<input v-model="addressData.name" type="text" placeholder="请填写收件人姓名" placeholder-class="pls" />
				</view>
				<view class="form-item">
					<label>手机号码</label>
					<input v-model="addressData.phone" type="number" placeholder="请输入收件人手机号" placeholder-class="pls" />
				</view>
				<!-- <view class="form-item" @click="regionpop = true"> -->
				<view class="form-item">
					<label>所在地区</label>
					<!-- area_name  province_id -->
					<input v-model="addressData.areaName" @click="regionpop = true" disabled type="text" placeholder="请选择所在地区" placeholder-class="pls" />
					<view class="dwbox" @click="getMapLocation">
						<text>定位</text>
						<image class="right_address" src="@/static/images/address.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="form-item">
					<label>详细地址</label>
					<textarea v-model="addressData.address" type="text" placeholder="请输入详细的小区楼栋/乡村名称" placeholder-class="pls" />
				</view>
			</view>
			<view class="form-item">
				<label>设为默认收货地址</label>
				<u-switch v-model="addressData.moren" :activeValue="1" :inactiveValue="0"  activeColor="#e54e4e"></u-switch>
			</view>
		</view>

		<region :show="regionpop" @confirm="regionConfirm" @close="regionpop = false"></region>

		<view v-if="addressData.id" class="activebox" @click="modal = true">
			<text>删除该地址</text>
		</view>
		<u-modal :show="modal" title="确定删除该地址吗？" @close="modal = false" :closeOnClickOverlay="true">
			<view class="u-modal-btnbox" slot="confirmButton">
				<button @click="modal = false">取消</button>
				<button @click="del">确认</button>
			</view>
		</u-modal>
		<footer-btn text="保存" @submit="submit"></footer-btn>
	</view>
</template>

<script>
import API from '@/common/api';
import { getAddress } from '@/common/tool.js';
export default {
	name: 'editAddress',
	data() {
		return {
			regionpop: false,
			modal: false,
			addressData: {
				id: 0,
				name: '',
				phone: '',
				province_id: '',
				province_name: '',
				city_id: '',
				city_name: '',
				area_id: '',
				area_name: '', // 所在区
				areaName: '',
				address: '', // 详细地址
				default: true,
				moren: 0
			}
		};
	},
	onLoad(data) {
		if (data.hasOwnProperty('id')) {
			this.addressData.id = data.id;
			this.getInfo();
		}
		uni.setNavigationBarTitle({
			title: '添加收货地址'
		});
	},
	methods: {
		getMapLocation() {
			uni.chooseLocation({
				isHighAccuracy: true,
				success: (res) => {
					// 获取省市区信息
					getAddress(res.longitude, res.latitude).then((res) => {
						const { province, city, district } = res.result.address_component;
						this.addressData.province_name = province;
						this.addressData.city_name = city;
						this.addressData.area_name = district;
						this.addressData.areaName = `${province}-${city}-${district}`;
						this.addressData.address = res.result.formatted_addresses.recommend;
						this.addressData.province_id = 0;
						this.addressData.city_id = 0;
						this.addressData.area_id = 0;
					});
				},
				fail: () => {
					// 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判断是否有地理授权信息
				}
			});
		},
		getInfo() {
			API.getJson('userAddress_detail', { id: this.addressData.id }).then((res) => {
				const { code, data, message } = res;
				if (code === 1) {
					data.default = data.if_default == 1;
					data.moren = data.if_default;
					data.province_name = data.areaName.split('-')[0];
					data.city_name = data.areaName.split('-')[1];
					data.area_name = data.areaName.split('-')[2];
					Object.assign(this.addressData, data);
				}
			});
		},

		regionConfirm(e) {
			const { id, name } = e;
			this.addressData.province_name = name[0];
			this.addressData.city_name = name[1];
			this.addressData.area_name = name[2];
			this.addressData.areaName = name.join('-');
			this.addressData.province_id = id[0];
			this.addressData.city_id = id[1];
			this.addressData.area_id = id[2];
			this.regionpop = false;
		},
		submit() {
			API.getJson('userAddress_add', { ...this.addressData }).then((res) => {
				const { code, data, message } = res;
				if (code === 1) {
					uni.showToast({
						title: message
					});
					setTimeout(() => {
						this.toBack();
					}, 500);
				}
			});
		},
		del() {
			API.getJson('userAddress_delete', { id: this.addressData.id }).then((res) => {
				const { code, data, message } = res;
				if (code === 1) {
					uni.showToast({
						title: message
					});
					setTimeout(() => {
						this.toBack();
					}, 500);
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.editAddress {
	.activebox {
		.fix-c-x();
		bottom: 200rpx;
		text-align: center;
		text {
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #e54e4e;
		}
	}
	.container {
		padding: 24rpx 32rpx;
		.form-item+.form-item{
			border-top: 1px solid #eee;
		}
		.form-item {
			padding: 24rpx 0;
			.flex-between();
			align-items: flex-start;
			.dwbox{
				display: flex;
				align-items: center;
				text{
					font-size: 24rpx;
				}
				.j-active();
			}
			textarea {
				flex: 1;
				height: 80rpx;
				padding: 14rpx;
				// margin-left: 24rpx;
				// .bor();
				border: 1px solid #ccc;
				border-radius: 10rpx;
				font-size: 28rpx;
				color: #000000;
			}
			label {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				min-width: 150rpx;
			}
			input {
				flex: 1;
				text-align: left;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
			.pls {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}
			.right_img {
				width: 9rpx;
				height: 16rpx;
				margin-left: 18rpx;
			}
			.right_address {
				width: 32rpx;
				height: 32rpx;
				margin-left: 18rpx;
			}
		}
		.card {
			padding: 10rpx 24rpx;
			background: #ffffff;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}
	}
}
</style>
